<template>
	<echartTitle title="近十日各个景区下水人数"/>
	<Echarts :option="option"  width="100%" height="100%" />
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from '../../../components/echarts/index.vue'
import echartTitle from '../../../components/echartTitle/index.vue';

const option = reactive( {
    xAxis: {
        type: 'category',
        data: ['大楠溪',
            '石桅岩',
            '大若岩',
            '太平岩',
            '岩坦溪',
            '四海山',
            '源头',
		'其他'],
            axisLine: {
			show: true, //隐藏X轴轴线
			lineStyle: {
				color: '#eee',
				width: 1
			}
		},
		axisTick: {
			show: true, //隐藏X轴刻度
			alignWithLabel: true
		},
		axisLabel: {
			show: true,
			fontSize: 12,
			fontWeight: 500,
			color: "white"
		}
    },
	tooltip: {
		trigger: 'axis',
		backgroundColor: "rgba(0,0,0,.6)",
		textStyle: {
			color: "#FFF",
		},
	},
    yAxis: {
        type: 'value',
        nameTextStyle: {
				color: 'white',
				fontSize: 9
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: true,
				fontSize: 10,
				color: "white"
			}
    },
    series: [
        
        {
			name:"人数",
            data: [60, 50, 44, 34, 26 , 52, 22,121],
            barWidth:10,
			itemStyle: {
            // 设置圆角
            borderRadius: [5, 5, 0, 0]  // 这里的数组分别表示左上、右上、右下、左下的圆角半径
        },
            type: 'bar'
        }
    ]
});
</script>